<template>
  <div class="map-toolbar">
    <el-card class="toolbar-card">
      <template #header>
        <span>绘制工具</span>
      </template>
      
      <div class="tool-group">
        <div class="tool-section">
          <h4>基础工具</h4>
          <div class="tool-buttons">
            <el-button 
              :type="drawMode === 'none' ? 'primary' : 'default'"
              @click="selectTool('none')"
              size="small"
            >
              <el-icon><Pointer /></el-icon>
              选择
            </el-button>
            
            <el-button 
              :type="drawMode === 'point' ? 'primary' : 'default'"
              @click="selectTool('point')"
              size="small"
            >
              <el-icon><Location /></el-icon>
              标记点
            </el-button>
          </div>
        </div>
        
        <div class="tool-section">
          <h4>绘制工具</h4>
          <div class="tool-buttons">
            <el-button 
              :type="drawMode === 'free_line' ? 'primary' : 'default'"
              @click="selectTool('free_line')"
              size="small"
            >
              <el-icon><EditPen /></el-icon>
              自由线
            </el-button>
            
            <el-button 
              :type="drawMode === 'line' ? 'primary' : 'default'"
              @click="selectTool('line')"
              size="small"
            >
              <el-icon><Connection /></el-icon>
              直线
            </el-button>
            
            <el-button 
              :type="drawMode === 'polygon' ? 'primary' : 'default'"
              @click="selectTool('polygon')"
              size="small"
            >
              <el-icon><Crop /></el-icon>
              多边形
            </el-button>
            
            <el-button 
              :type="drawMode === 'circle' ? 'primary' : 'default'"
              @click="selectTool('circle')"
              size="small"
            >
              <el-icon><CircleCheck /></el-icon>
              圆形
            </el-button>
            
            <el-button 
              :type="drawMode === 'rectangle' ? 'primary' : 'default'"
              @click="selectTool('rectangle')"
              size="small"
            >
              <el-icon><Box /></el-icon>
              矩形
            </el-button>
          </div>
        </div>
        
        <div class="tool-section">
          <h4>操作工具</h4>
          <div class="tool-buttons">
            <el-button 
              @click="clearAll"
              size="small"
              type="danger"
            >
              <el-icon><Delete /></el-icon>
              清空
            </el-button>
            
            <el-button 
              @click="exportData"
              size="small"
              type="success"
            >
              <el-icon><Download /></el-icon>
              导出
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 绘制状态提示 -->
      <div v-if="drawMode !== 'none'" class="draw-status">
        <el-alert
          :title="drawStatusTitle"
          :description="drawStatusDesc"
          type="info"
          show-icon
          :closable="false"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useMapStore } from '../../stores/map'
import { storeToRefs } from 'pinia'
import { 
  Pointer, 
  Location, 
  Connection, 
  Crop, 
  CircleCheck, 
  Box, 
  Delete, 
  Download,
  EditPen
} from '@element-plus/icons-vue'

const mapStore = useMapStore()
const { drawMode, drawState } = storeToRefs(mapStore)
const emit = defineEmits(['selectTool']) // 普通事件
// 选择工具
const selectTool = (tool) => {
  console.log('选择工具:', tool)
  mapStore.setDrawMode(tool)
  
  // 如果选择了绘制工具，初始化绘制状态
  if (tool !== 'none') {
    // 可以在这里添加一些初始化逻辑
    console.log('开始绘制模式:', tool)
    emit('selectTool', tool)
  } else {
    // 选择模式，清除绘制状态
    mapStore.clearDrawState()
  }
}

// 清空所有绘制
const clearAll = () => {
  mapStore.layers.length = 0
  mapStore.clearDrawState()
}

// 导出数据
const exportData = () => {
  const data = {
    layers: mapStore.layers,
    timestamp: new Date().toISOString()
  }
  
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `map-data-${Date.now()}.json`
  a.click()
  URL.revokeObjectURL(url)
}

// 绘制状态提示
const drawStatusTitle = computed(() => {
  const titles = {
    point: '绘制标记点',
    line: '绘制线段',
    polygon: '绘制多边形',
    circle: '绘制圆形',
    rectangle: '绘制矩形'
  }
  return titles[drawMode.value] || ''
})

const drawStatusDesc = computed(() => {
  const descs = {
    point: '点击地图添加标记点',
    line: '点击地图添加线段顶点，双击完成绘制',
    polygon: '点击地图添加多边形顶点，双击完成绘制',
    circle: '点击地图确定圆心，拖拽确定半径',
    rectangle: '点击地图确定起点，拖拽确定矩形'
  }
  return descs[drawMode.value] || ''
})
</script>

<style scoped>
.map-toolbar {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  width: 280px;
}

.toolbar-card {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tool-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tool-section h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.tool-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-buttons .el-button {
  flex: 1;
  min-width: 60px;
}

.draw-status {
  margin-top: 16px;
}
</style> 